import { LeftOutlined } from '@ant-design/icons';
import { Spin } from 'antd';
import { useMemo, useState } from 'react';
import styles from './index.less';

declare type DescProps = {
  onBack: () => void;
  versions: any[];
};

const Preview = (props: DescProps) => {
  const { onBack, versions } = props;

  const [loading, setLoading] = useState(true);

  const [key, setKey] = useState('V1');

  const frameSrc = useMemo(
    () => versions?.find((item) => item.name === key)?.url || '',
    [key],
  );

  const hideLoading = () => {
    setLoading(false);
  };

  const handleClick = (info: any) => {
    setKey(info.name);
  };

  return (
    <div className={styles.preview}>
      <div className={styles.iframe}>
        <Spin spinning={loading} size="large">
          <iframe
            src={frameSrc}
            className={styles.iframe_main}
            onLoad={hideLoading}
          ></iframe>
        </Spin>
      </div>
      <div className={styles.tagBox}>
        <div className={styles.tagBack} onClick={onBack}>
          <LeftOutlined />
        </div>
        {versions.map((item: any, index: number) => {
          return (
            <div
              className={`${styles.tagItem} ${
                key === item.name ? styles.actives : ''
              }`}
              key={index}
              onClick={() => handleClick(item)}
            >
              {item.name}
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default Preview;
